<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="#">菜单管理</a></el-breadcrumb-item>
        </el-breadcrumb>

        <el-button class="btn" type="primary" size="small" plain @click="add">添加</el-button>

        <!-- 列表 -->
        <div>
            <el-table :data="menulist" row-key="id" border default-expand-all :tree-props="{ children: 'children' }"
                style="width: 100%">
                <el-table-column prop="id" label="菜单编号" />
                <el-table-column prop="title" label="菜单名称" />
                <el-table-column prop="pid" label="上级菜单" />
                <el-table-column prop="icon" label="菜单图标">
                </el-table-column>
                <el-table-column prop="url" label="菜单地址" />
                <el-table-column label="状态">
                    <template #default="item">
                        <div>
                            <el-tag type="success" v-if="item.row.status == 1">启用</el-tag>
                            <el-tag type="danger" v-else>禁用</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="item">
                        <div>
                            <el-button type="primary" size="small" @click="edit(item.row.id)">编辑</el-button>
                            <el-button type="danger" size="small" @click="del(item.row.id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <!-- 弹框 -->
        <div>
            <el-dialog v-model="isShow" :title="isAdd ? '添加菜单' : '编辑菜单'" center @close="cancel(formRef)">
                <el-form :model="form" :rules="rules" ref="formRef">
                    <el-form-item prop="title" label="菜单名称" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off" />
                    </el-form-item>
                    <el-form-item prop="pid" label="上级菜单" :label-width="formLabelWidth">
                        <el-select @change="changePid" v-model="form.pid" placeholder="请选择上级菜单">
                            <el-option label="顶级菜单" :value="0"></el-option>
                            <el-option v-for="item in menulist" :key="item.id" :label="item.title" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="菜单类型" :label-width="formLabelWidth">
                        <el-radio disabled v-model="form.type" :label="1">目录</el-radio>
                        <el-radio disabled v-model="form.type" :label="2">菜单</el-radio>
                    </el-form-item>
                    <el-form-item v-if="form.type == 1" label="菜单图标" :label-width="formLabelWidth">
                        <el-input v-model="form.icon" autocomplete="off" />
                    </el-form-item>
                    <el-form-item v-else label="菜单地址" :label-width="formLabelWidth">
                        <el-select v-model="form.url">
                            <el-option v-for="item in indexRoutes" :key="item.path" :value="item.path"
                                :label="item.meta.title"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancel(formRef)">取消</el-button>
                        <el-button type="primary" @click="comfirm(formRef)">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { menuList, menuInfo, menuAdd, menuDel, menuEdit } from '@/request/api'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue';
import { indexRoutes } from '@/router'
// 列表
let menulist = ref<any>([])

// 控制弹框显示隐藏
let isShow = ref(false)
// 控制添加还是编辑
let isAdd = ref(true)


let form = ref<any>({
    pid: '', //上级分类编号  注意：顶级菜单 - 0 
    title: '',  //菜单名称
    icon: '',  //图标 
    type: 1,  //类型 1目录2菜单
    url: '',  //菜单地址
    status: 1  //状态   1正常2禁用
})
let formRef = ref<FormInstance>()
let rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
        { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' },
    ],
    pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
})

let formLabelWidth = '140px'


let changePid = () => {
    form.value.type = form.value.pid == 0 ? 1 : 2;
}

// 添加
let add = () => {
    isShow.value = true
    isAdd.value = true
}

// 重置
let reset = (formEl: FormInstance | undefined) => {
    // let reset = () => {
    if (!formEl) return
    formEl.resetFields(),
        form.value = {
            pid: '', //上级分类编号  注意：顶级菜单 - 0 
            title: '',  //菜单名称
            icon: '',  //图标 
            type: 1,  //类型 1目录2菜单
            url: '',  //菜单地址
            status: 1  //状态   1正常2禁用
        }
}

// 取消
let cancel = (formEl: FormInstance | undefined) => {
    isShow.value = false
    reset(formEl)
}

// 编辑
let edit = (id: number) => {
    isShow.value = true
    isAdd.value = false
    lookup(id)
}

// 删除
let del = (id: number) => {
    ElMessageBox.confirm(
        '你确定要删除这条数据吗?',
        '提示警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            menuDel({
                id
            }).then(res => {
                console.log(res, '菜单删除');
                if (res.data.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    })
                    getMenu()
                    return
                }
                ElMessage({
                    type: 'info',
                    message: res.data.msg
                })
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

// 确定
let comfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log(form.value)
            if (isAdd.value) {
                // console.log('菜单添加');
                menuAdd(form.value)
                    .then(res => {
                        console.log(res, '菜单添加');
                        if (res.data.code == 200) {
                            ElMessage(res.data.msg)
                            cancel(formEl)
                            getMenu()
                        }
                    })
            } else {
                // console.log('菜单编辑');
                menuEdit(form.value)
                    .then(res => {
                        console.log(res, '菜单编辑');
                        if (res.data.code == 200) {
                            ElMessage(res.data.msg)
                            cancel(formEl)
                            getMenu()
                        }
                    })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}


// 菜单列表
let getMenu = async () => {
    let res = await menuList()
    console.log(res, '菜单列表')
    if (res.data.code == 200) {
        menulist.value = res.data.list
    }
}
getMenu()


// 菜单获取（一条）
let lookup = (id: any) => {
    menuInfo({
        id
    }).then(res => {
        console.log(res, '获取一条数据');
        form.value = res.data.list
        form.value.id = id
    })
}
</script>

<style scoped>
.btn {
    margin: 15px 0;
}
</style>